<template lang="html">
    <div class="" id="loginRecord">
        <div class="m-search-box">
            <el-form ref="searchItem" :model="searchItem" :inline="true"  class="demo-form-inline">
                <el-form-item label="用户名" class="search-item" prop="name">
                    <el-input v-model="searchItem.name" placeholder="用户名"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="fa-search" @click="search">查询</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button icon="fa-repeat" @click="resetForm('searchItem')">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
        <!--列表-->
        <div class="table-box">
            <el-table border :data="tableData">
                <el-table-column align="center" label="用户名" prop="userName"></el-table-column>
                <el-table-column align="center" label="创建时间" prop="createTime"></el-table-column>
                <el-table-column align="center" label="登陆时间" prop="loginTime"></el-table-column>
                <el-table-column align="center" label="登陆IP" prop="loginIp"></el-table-column>
            </el-table>
        </div>
        <!--分页-->
        <div class="page">
            <el-pagination
                :page-sizes="[10, 30, 45]"
                :page-size="pageSize"
                layout="prev, pager, next, total, sizes"
                :total="this.total"
                :current-page="pageNum"
                @current-change="currentChange"
                @size-change="sizeChange"
                >
            </el-pagination>
        </div>
    </div>
</template>

<script>
import axo from "@/assets/js/axo";
import {formatTime} from "@/assets/js/utils";
export default {
    name: "loginRecord",
    data () {
        return {
            tableData: [],
            searchItem: {
                name: ''
            },
            pageNum: 1,
            pageSize: 10,
            total: 0
        };
    },
    methods: {
        currentChange (val) {
            this.pageNum = val;
            console.log(`当前页: ${val}`);
            console.log(this.page);
            this.loadData(val, this.pageSize);
        },
        sizeChange (val) {
            this.pageSize = val;
            this.loadData(this.pageNum, val);
            console.log(`每页 ${val} 条`,';总数：', this.total);
        },
        search () {
            console.log(this.searchItem.name);
            this.loadData(this.pageNum, this.pageSize, this.searchItem.name);
        },
        resetForm (item) {
            this.$refs[item].resetFields();
        },
        async loadData (pageNum=1, pageSize=10, name="") {
            await axo({
                method: 'post',
                url: '/api-sys/loginLog/queryList',
                data: {
                    "platformNo": "1",
                    "body": {
                        name: name,
                        pageNum: pageNum,
                        pageSize: pageSize
                    }
                }
            }).then((res) => {
                console.log(JSON.parse(res.data.ciphertext));
                let ciphertext = JSON.parse(res.data.ciphertext);
                this.tableData = ciphertext.list;
                this.total = Number(ciphertext.total);
                // console.log(this.tableData);
                this.tableData = this.tableData.map((ele,i) => {
                    ele.loginTime = formatTime(ele.loginTime);
                    ele.createTime = formatTime(ele.createTime);
                    return ele;
                });
            });
        }

    },
    mounted () {
        this.$nextTick(function () {
            this.loadData();
        });
    }
};
</script>

<style lang="scss">
    #loginRecord{
        .m-search-box{
            border: 1px solid #eee;
            margin:20px;
            padding:22px 0 0 20px;
            min-width: 1200px;
            box-sizing: border-box;
            .search-in{
                .search-item{
                    margin-right: 30px;
                }
            }
        }
        .table-box{
            border: 1px solid #eee;
            margin:20px;
            min-width: 1200px;
            .add-btn{
                margin: 20px;
                .el-icon-plus{
                    font-size:12px;
                }
            }
            .export-btn{
                padding: 15px;
            }
        }
        .el-table .cell, .el-table th>div{
            padding:5px;
            white-space: nowrap;
        }
        .page{
            text-align: right;
            padding:0 10px;
            .el-pagination{
                padding:0;
            }
        }
    }
</style>
